<template>
  <div v-if="false && imgArr && imgArr.length > 0">
    <div class="swiper headSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in imgArr" :key="index">
          <img :src="item.image" :data-v='JSON.stringify(item)' class="notice-strip"
            alt="15% discount for limited time up to $1,000,000 - 100buy">
        </div>
      </div>
    </div>
    <!-- 转盘 -->
    <rotary-table ref="rotaryRef"></rotary-table>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { mapState } from "vuex";
import rotaryTable from './rotary-table.vue';
import { pointUser } from "@/common/point/api-hook";//打点日志
export default {
  components: { rotaryTable },
  data() {
    return {
      imgArr: [],
      carouselVal: 0,
      headSwiper: '',
      autoplayConfig: {
        enabled: false,
        delay: 8000
      }
    }
  },
  computed: {
    ...mapState({
      config: (state) => state.config.config
    })
  },
  watch: {
    config: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          this.getBannerList();
        }
      }
    },
    'imgArr.length': {
      immediate: false,
      handler(newLength) {
        if (newLength > 1) {
          this.autoplayConfig.enabled = true;
        } else {
          this.autoplayConfig.enabled = false;
        }
        if (this.headSwiper) {
          if (this.autoplayConfig.enabled) {
            this.headSwiper.params.autoplay = {
              delay: this.autoplayConfig.delay,
              disableOnInteraction: false
            };
            this.headSwiper.autoplay.start();
          } else {
            this.headSwiper.autoplay.stop();
          }
        }
      }
    }
  },
  methods: {
    getBannerList() {
      this.imgArr = this.config.bannerGroup.TOP;
      this.initSwiper();
    },
    // 初始化swiper
    initSwiper() {
      this.$nextTick(() => {
        this.headSwiper = new Swiper(".headSwiper", {
          effect: "cards",// 切换效果
          autoplay: this.autoplayConfig.enabled ? {
            delay: this.autoplayConfig.delay,
            disableOnInteraction: false
          } : false,
          direction: 'vertical',// horizontal-水平  vertical-垂直
          initialSlide: 0,// 初始化显示第一个
          speed: 1000,// 单次的切换速度
          loop: true,// 循环
          spaceBetween: 0,
          on: {
            click: (event) => {
              if (event.target) {
                let obj = JSON.parse(event.target.getAttribute('data-v'));
                if (obj.jump.indexOf('christmas') != -1) {
                  this.$refs.rotaryRef.open();
                } else {
                  if (obj.linkType === 'INTERNAL') {
                    // 内部链接
                    this.$router.push(obj.jump)
                  } else {
                    if (obj.title === 'discount') {
                      pointUser('actions', '3001');
                    }
                    window.open(obj.jump, '_blank');
                  }
                }
              }
            }
          }
        });
      })
    }
  }
}
</script>

<style lang="less" scoped>
.headSwiper {
  width: 100%;
  height: 80px;
  overflow: hidden;

  .swiper-wrapper {

    .swiper-slide {
      width: 100%;

      .notice-strip {
        width: 100%;
        display: block;
        cursor: pointer;
      }

      .chris-sty {
        position: relative;

        .notice-strip {
          width: 100%;
          display: block;
          cursor: pointer;
        }
      }
    }
  }
}

.notice-strip {
  width: 100%;
  display: block;
  cursor: pointer;
}
</style>
